<template>
    <div v-show="props.modelValueInfo.status" class="full" style="position: fixed;top:0;left:0;user-select: none;z-index: 1;"
        @contextmenu.prevent="">
        <div class="full" @click="handle_click" @contextmenu.prevent.stop="handle_click"></div>
        <RightMenuList :data="data" :item-size="itemSize" :setting="childInfo" :theme="theme"></RightMenuList>
    </div>
</template>
<script lang="ts" setup>
import RightMenuList from "./RightMenuList.vue";

const emits = defineEmits(["updateModelValue"])
const props = defineProps({
    data: <any>Array,//菜单数据
    modelValueInfo: <any>Object,//设置入口
    theme: {//主题
        type: String,
        default: 'light',
    },
})
const itemSize = ref<any>({
    width: 150,
    height: 30,
})

const childInfo = ref<any>({
    status: false,
    x: 0,
    y: 0,
})


watch(() => props.modelValueInfo, (newValue, _oldValue) => {
    if (newValue.status) {
        calculatePosition();
    }
}, { deep: true, immediate: true })

function calculatePosition() {
    let x = 0;
    let y = 0;
    let screen = getScreen();
    let childHeight = props.data.length * itemSize.value.height;
    if (screen.width - props.modelValueInfo.x <= itemSize.value.width) {
        x = screen.width - itemSize.value.width;
    } else {
        x = props.modelValueInfo.x;
    }
    if (screen.height - props.modelValueInfo.y <= childHeight) {
        y = screen.height - childHeight - 30;
    } else {
        y = props.modelValueInfo.y;
    }
    childInfo.value = {
        status: true,
        x: x,
        y: y,
    }
}

/**
* 获取窗口大小
*/
function getScreen() {
    return {
        width: document.body.clientWidth,
        height: document.body.clientHeight,
    }
}

/**
 * 统一关闭菜单入口
 */
function close() {
    childInfo.value = {
        status: false,
        x: 0,
        y: 0,
    }
    emits("modelValueInfo", { status: false, x: 0, y: 0 })
    // this.$event.$emit("RightMenuListClose");
}

/**
 * 单击空白地方，左右键通用
 */
function handle_click(event) {
    close();
    // setTimeout(() => {
    //     document.elementFromPoint(event.clientX, event.clientY).dispatchEvent(event);
    // }, 10);
}


// 右键菜单示例
const dataShili = ref([{
    name: '刷新(E)',
    outline: true,
    click: () => {
        alert("刷新(E)");
    }
}, {
    name: '粘贴快捷方式(S)',
    enable: false,
    outline: true,
    click: () => {
        alert("刷新(E)");
    }
}, {
    name: '新建(W)',
    outline: true,
    child: [{
        name: '文件夹(F)',
        icon: {
            type: 'url',
        },
    }],
}, {
    name: '个性化(R)',
    icon: {
        type: 'url',
    },
    click: () => {
        alert("个性化(R)");
    }
}])
</script>
<style scoped></style>
